<template>
  <nav class="navbar">
    <div class="navbar-custom-menu">

      <el-dropdown trigger="click" class="navbar-dropdown">
        <div class="el-dropdown-link">
          <img src="../../../../static/logo.png" style="width: 25px;height: 25px;border-radius: 50%; vertical-align: middle;padding: 13px 5px;">
          管理员
        </div>
        <el-dropdown-menu  slot="dropdown" style="padding: 0px">
          <div>
            <div class="header-pic">
              <img src="../../../../static/logo.png">
              管理员
            </div>
            <div class="pull-left">
              <el-button type="default">
                <!--个人设置-->
                {{ $t('zl.sysm.personal.settings') }}
              </el-button>
            </div>
            <div class="pull-right">
              <el-button type="default" @click="loginOut">
                <!--退出-->
                {{ $t('zl.sysm.exit') }}
              </el-button>
            </div>
          </div>
        </el-dropdown-menu>
      </el-dropdown>

    </div>
  </nav>
</template>

<script>
import {mapActions} from 'vuex'
import types from '../../../store/mutation-types'

export default {
  // 递归组件必须有name
  name: 'headTop',
  data () {
    return {

    }
  },
  computed: {

  },
  methods: {
    ...mapActions({
      userLogout: 'user/logout',
      permissionClearMenuList: types.PERMISSION + types.FS + types.CLEAR_MENU_LIST,
      permissionClearTabsRouter: types.PERMISSION + types.FS + types.CLEAR_TABS_ROUTER

    }),
    loginOut () {
      this.userLogout().then(res => {
        this.$router.push('/login')
        this.permissionClearMenuList()
        this.permissionClearTabsRouter()
      }).catch(err => {
        console.log('退出出错:', err)
      })
    }
  }
}
</script>

<style>
  .navbar-custom-menu{
    float: right;
    padding: 0 6px;
  }

  .navbar-custom-menu .el-dropdown-link{
    cursor: pointer;
    height: 46px;
    min-width: 46px;
    text-align: center;
  }

  .navbar-custom-menu .el-dropdown-link:hover{
    background: rgba(7, 4, 33, 0.26);
  }

  .el-dropdown-menu .header-pic{
    text-align: center;
    padding: 20px;
  }
  .el-dropdown-menu .header-pic img{
    vertical-align: middle;
    height: 90px;
    width: 90px;
    border: 3px solid;
    border-color: transparent;
    border-color: hsla(0,0%,100%,.6);
    background-color: #070421;
  }
  .el-dropdown-menu .header-pic p{
    font-size: 1.5rem;
  }
  .el-dropdown-menu .pull-left{
    padding: 10px;
    display: inline-block;
    float: left;
  }
  .el-dropdown-menu .pull-right{
    padding: 10px;
    float: right;
    display: inline-block;
  }
</style>
